<template>
  <!-- 头部导航 -->
  <CustomNavbar></CustomNavbar>
  <!-- 滚动容器 -->
  <scroll-view
    class="scroll-view"
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    :scroll-y="true"
    @scrolltolower="onScrolltolower"
  >
    <!-- 当页面数据未加载完毕 先展示骨架框 -->
    <!-- 使用条件渲染 展示骨架屏 数据加载完就展示真实页面 -->
    <PageSkeleton v-if="isLoading"></PageSkeleton>
    <template v-else>
      <!-- 将轮播图数据传递给子组件 自定义名字 -->
      <XtxSwiper :list="bannerList"></XtxSwiper>
      <!-- 分类宫格 -->
      <CategoryPanel :todolist="todoList"></CategoryPanel>
      <!-- 热门推荐 -->
      <HotPanel :hotlist="hotList"></HotPanel>
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef"></XtxGuess>
    </template>
  </scroll-view>
</template>

<script setup lang="ts">
//引入导航组件
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from './components/CustomNavbar.vue'
import { ref } from 'vue'
// 引入轮播图组件
// import XtxSwiper from '@/components/XtxSwiper.vue' //已经全局使用了组件里的 所以不用引入
// 引入轮播图接口
import { getHomeBannerAPI, getHomeHotAPI, getHomeMutliAPI } from '@/services/home/home'
import type { BannerData, HotItem, MutliItem } from '@/types/home'
import CategoryPanel from './components/CategoryPanel.vue' //分类
import HotPanel from './components/HotPanel.vue' //热门
// import type { XtxGuessInstance } from '@/types/component' //猜你喜欢的组件实例类型
import PageSkeleton from './components/PageSkeleton.vue' //骨架屏
import { useGuessList } from '@/composables'

// 定义一个数组接收轮播图的内容
const bannerList = ref<BannerData[]>([])
// 获取轮播数据
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  // console.log(res);
  bannerList.value = res.result
}

// 首页平台分类接口
// 定义一个数组接收平台分类的内容
const todoList = ref<MutliItem[]>([])
const getHomeMutliData = async () => {
  const res = await getHomeMutliAPI()
  // console.log(res);
  todoList.value = res.result
}

// 首页热门
//  定义一个数组接收平台分类的内容
const hotList = ref<HotItem[]>([])
const getHomeHotData = async () => {
  const res = await getHomeHotAPI()
  // console.log(res);
  hotList.value = res.result
}

// 定义一个条件渲染数据 用来显示骨架框或者真实页面
const isLoading = ref(true)

// 页面加载
onLoad(async () => {
  await Promise.all([getHomeBannerData(), getHomeMutliData(), getHomeHotData()])
  // 只有当页面加载完成后 展示真实页面 隐藏骨架框
  isLoading.value = false
})

// // 获取到猜你喜欢子组件实例
// const guessRef = ref<XtxGuessInstance>()
// // 滚动容器触底时 重新调用子组件猜你喜欢的接口 获取数据 父调用子内部的方法
// const onScrolltolower = () => {
//   // 调用子组件的方法 下拉触底可以 一直加载数据
//   guessRef.value?.getMore()
// }

// 调用猜你喜欢组合式函数
const { guessRef, onScrolltolower } = useGuessList()
// 定义下拉刷新动画默认关闭
const isTriggered = ref(false)
//自定义下拉刷新时 触发的 事件  滚动容器里的重新加载
const onRefresherrefresh = async () => {
  // 下拉时开启动画
  isTriggered.value = true
  //调用子组件的方法 实现猜你喜欢内容重置
  guessRef.value?.resetData()
  // 这样写的的话就是第一个加载完 加载第二个 这样加载时间有点长 可以使用Promise.all 同时加载
  // await getHomeBannerData(),
  // await getHomeMutliData(),
  // await getHomeHotData(),
  // 方法里再调用子组件猜你喜欢的接口
  await Promise.all([
    getHomeBannerData(),
    getHomeMutliData(),
    getHomeHotData(),
    guessRef.value?.getMore(),
  ])
  // 加载完毕后 再关掉下拉刷新动画  所以前面方法都加上await
  isTriggered.value = false
}
</script>

<style lang="scss">
// 改变首页底色
page {
  background-color: #f7f7f7;
  // 父容器设置display
  height: 100%;
  display: flex;
  flex-direction: column;
  .scroll-view {
    flex: 1;
  }
}
</style>
